import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './Mai.css'; 
import { NavBar, Space, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom';

export default function Mai() {
    const navigate = useNavigate();
    const [list, setList] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    const getData = () => {
        setLoading(true);
        setError(null);
        axios.get("http://127.0.0.1:3000/mai?id=" + JSON.parse(localStorage.getItem("user")))
            .then((res) => {
                setList(res.data.data);
                setLoading(false);
            })
            .catch((err) => {
                setError("加载商品失败，请稍后重试");
                setLoading(false);
                console.error("获取数据失败:", err);
            });
    };

    useEffect(() => {
        getData();
    }, []);

    if (loading) {
        return (
            <div className="mai-container">
                <div className="loading-spinner">
                    <div className="spinner"></div>
                    <p>加载中...</p>
                </div>
            </div>
        );
    }

    if (error) {
        return (
            <div className="mai-container">
                <div className="error-message">
                    您还未登录,请先去<span onClick={()=>{
                        navigate('/login')
                    }} style={{color:"blue"}}>登录</span>
                </div>
            </div>
        );
    }

    if (list.length === 0) {
        return (
            <div className="mai-container">
                <div className="empty-message">
                    <p>暂无商品数据</p>
                </div>
            </div>
        );
    }
    const back = () => {
        navigate("/my"); 
    }

    return (
        <div className="mai-container">
            <NavBar onBack={back}>我发布的</NavBar>
            <div className="mai-grid">
                {list.map((item, index) => (
                    <div className="mai-card" key={index}>
                        <div className="mai-card-image">
                            <img 
                                src={item.img[0].url} 
                                alt={item.title} 
                               
                            />
                        </div>
                        <div className="mai-card-content">
                            <h3 className="mai-card-title">{item.title}</h3>
                            <p className="mai-card-desc">{item.desc}</p>
                            <div className="mai-card-footer">
                                <span className="mai-card-price">¥{item.price}</span>
                                <button className="mai-card-button" onClick={()=>{
                                    if(confirm('是否下架该商品')){
                                        axios.get('http://127.0.0.1:3000/delete?id='+item._id).then(res=>{
                                            alert('下架成功')
                                            getData() 
                                        })
                                    }
                                }}>下架</button>
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    );
}